Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

214
Vistas
how to display " backward timer " using JavaScript?

I have my DOM like this :

     <input type="number" id="input" value="" placeholder="Enter time in minutes">
    <button id="button">Go</button>
    <button id="reset">reset</button>

    <div class="timer">
        <div class="mint" id="mint"></div>
        <div class="sec" id="sec"></div>
    </div>

And my JavaScript Like this :

let currentTime = 0;
let intervalClear;
let input = document.getElementById('input');
let button = document.getElementById('button')
button.addEventListener('click', ()=>{
    let value = input.value * 60000;
    function getTime(){
        currentTime++
        function backcount(currentTime){
            let output = value - currentTime
            console.log(output);
            const mint = document.getElementById('mint'),
            sec = document.getElementById('sec');

            let minute = Math.floor(output/60000)
            let second = ((output % 60000) / 1000).toFixed(0)
            mint.innerText = minute;
            sec.innerText = second;

            if(output == 0){
                clearInterval(intervalClear)
            }
        }
        backcount(currentTime);
    }
    getTime()
    intervalClear = setInterval(getTime, 1000)
})

const reset = document.getElementById('reset')
reset.addEventListener('click', ()=>{
    clearInterval(intervalClear);
    input.value = '';
})

now I want to display value in my web page But it doesn't updating. seems like its freezes. but my "setInterval()" running properly.

How can I resolve this issue? need help!

about 4 years ago · Juan Pablo Isaza
2 Respuestas
Responde la pregunta

0

You need instead of this code

let output = value - currentTime

use this

let output = value - (currentTime * 1000)

let currentTime = 0;
let intervalClear;
let input = document.getElementById('input');
let button = document.getElementById('button')
button.addEventListener('click', ()=>{
    let value = input.value * 60000;
    function getTime(){
        currentTime++
        function backcount(currentTime){
            let output = value - (currentTime * 1000)
            console.log(output);
            const mint = document.getElementById('mint'),
            sec = document.getElementById('sec');

            let minute = Math.floor(output/60000)
            let second = ((output % 60000) / 1000).toFixed(0)
            mint.innerText = minute;
            sec.innerText = second;

            if(output == 0){
                clearInterval(intervalClear)
            }
        }
        backcount(currentTime);
    }
    getTime()
    intervalClear = setInterval(getTime, 1000)
})

const reset = document.getElementById('reset')
reset.addEventListener('click', ()=>{
    clearInterval(intervalClear);
    input.value = '';
})
<input type="number" id="input" value="" placeholder="Enter time in minutes">
<button id="button">Go</button>
<button id="reset">reset</button>

<div class="timer">
    <div class="mint" id="mint"></div>
    <div class="sec" id="sec"></div>
</div>

about 4 years ago · Juan Pablo Isaza Denunciar

0

Based on @Oleg Barabanov's answer I found one bug. If you didn't enter any value in text box or first added value then click on "Reset" and click on "Go" button then counter started with negative value. I fixed that issue with this code.

Script

    var intervalClear;
    var input = document.querySelector('#input');
    var mint = document.querySelector('#mint');
    var sec = document.querySelector('#sec');
    var go_button = document.querySelector('#button');
    var reset_button = document.querySelector('#reset');

    go_button?.addEventListener('click', () => {
        if (input.value != '' && input.value != 0 && parseInt(input.value) != NaN) {
            startTimer(input.value, mint, sec);
        }
    });

    reset_button?.addEventListener('click', () => {
        clearInterval(intervalClear);
        mint.textContent = '00';
        sec.textContent = '00';
    });

    function startTimer(duration, minElement, secElement) {
        clearInterval(intervalClear);
        var timer = duration * 60, minutes, seconds;
        intervalClear = setInterval(function () {
            minutes = parseInt(timer / 60, 10);
            seconds = parseInt(timer % 60, 10);

            minutes = minutes < 10 ? "0" + minutes : minutes;
            seconds = seconds < 10 ? "0" + seconds : seconds;

            minElement.textContent = minutes;
            secElement.textContent = seconds;

            if (--timer < 0) {
                timer = duration;
            }

            if (minutes == 0 && seconds == 0) {
                clearInterval(intervalClear);
                mint.textContent = '00';
                sec.textContent = '00';
            }
        }, 1000);
    }

DOM

    <input type="number" id="input" placeholder="Enter time in minutes" >
    <button id="button">Go</button>
    <button id="reset">reset</button>

    <div class="timer">
      <div class="mint" id="mint">00</div>
      <div class="sec" id="sec">00</div>
    </div>
about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda